<template>
    <view class="page-community-index">
        <view class="menu">
            <u-row gutter="16">
				<u-col span="6" v-for="(item,index) in menu" :key="index">
                    <view class="content">
                        <view class="title">{{ item.name }}</view>
					    <view class="desc">这里是描述</view>
                    </view>					
				</u-col>
            </u-row>
        </view>
        <view class="p-4" v-if="list.length == 0">
            <u-empty text="暂无内容" mode="list"></u-empty>
        </view>        
        <view class="album" v-else>
            <view class="item" v-for="(item,index) in list" :key="index">
                <view class="avatar">
                    <u-image width="84rpx" height="84rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u-image>
                </view>
                <view class="content">
                    <view class="name">张三</view>
                    <view class="text">全面的组件和便捷的工具会让您信手拈来，如鱼得水</view>
                    <view class="imgs" v-if="item.imgs.length > 0" style="margin:0 -4px;">
                        <u-row gutter="16">
                            <u-col :span="item.imgs.length == 1 ? 12 : 4" v-for="(img,j) in item.imgs" :key="j">
                                <view>
                                    <u-image width="100%" :height="imgHeight" :src="img" @click="showImg(item.imgs, j)"></u-image>
                                </view>                                
                            </u-col>
                        </u-row>
                    </view>
                </view>
            </view>
        </view>
        <u-popup v-model="imgPopup.isShow" mode="center" width="100%" closeable>
            <u-swiper :list="imgPopup.list" :current="imgPopup.current" border-radius="0"></u-swiper>
		</u-popup>
    </view>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useAppStore } from '@/stores/app';
import { nextTick, onMounted } from 'vue';
const appStore = useAppStore();
const menu = reactive([
    {name: '建立分会'},
    {name: '历史活动'},
]);
const imgHeight = ref('100px');
const imgPopup = reactive({
    isShow:false,
    list: [],
    current: 0,
});
let list = reactive([
    {
        avatar: '', 
        username: '张三', 
        content: '全面的组件和便捷的工具会让您信手拈来，如鱼得水', 
        imgs: [
            'https://cdn.uviewui.com/uview/album/1.jpg',
        ]
    },
    {
        avatar: '', 
        username: '张三', 
        content: '全面的组件和便捷的工具会让您信手拈来，如鱼得水', 
        imgs: [
            'https://cdn.uviewui.com/uview/album/1.jpg',
            'https://cdn.uviewui.com/uview/album/2.jpg',
            'https://cdn.uviewui.com/uview/album/3.jpg',
            'https://cdn.uviewui.com/uview/album/6.jpg'
        ]
    },
]);
const getImgHeight = () => {
    const res = uni.getSystemInfoSync();
    let width = res.windowWidth - 45 - 42 - 16;
    imgHeight.value = (width / 3) + 'px';
};
const showImg = (imgs,i) => {
    imgPopup.isShow = true;
    imgPopup.list = imgs.map((item,index) => {
        return {title: index,image: item};
    });
    imgPopup.current = i;
    console.log(imgPopup.list);
}
onShow(() => {
    getImgHeight();
});
</script>
<style lang="scss">
page{background:#fff;}
</style>